<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>改造,动态加载菜单</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		
		<!-- 禁止页面缓存 -->
		<meta http-equiv="pragma" content="no-cache" /> 
		<meta http-equiv="Cache-Control" content="no-store, must-revalidate" /> 
		<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" /> 
		<meta http-equiv="expires" content="0" />
		
		<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./static/css/font.css">
		<link rel="stylesheet" href="./static/css/weadmin.css">

		<script type="text/javascript" src="./lib/js/jquery-1.11.3.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="./lib/js/jquery.cookie.min.js" charset="utf-8"></script>

		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="../../html/mgr_opt_data/mgr_res/env_cfg.js" charset="utf-8"></script>
		
		<script type="text/javascript" >
			var global_env = {};
			global_env.urls = {};
			global_env.urls.tpltRootPath="./";
			global_env.urls.curContextPath="./"
		</script>

	</head>

	<body>
		<!-- 顶部开始 -->
		<div class="container">
			<div class="logo">
				<a href="./index.html">WeAdmin v1.0</a>
			</div>
			<div class="left_open">
				<i title="展开左侧栏" class="iconfont">&#xe699;</i>
			</div>
			<ul class="layui-nav left fast-add" lay-filter="">
				<li class="layui-nav-item">
					<a href="javascript:;">+新增</a>
					<dl class="layui-nav-child">
						<!-- 二级菜单 -->
						<dd>
							<a onclick="WeAdminShow('资讯','https://www.youfa365.com/')"><i class="iconfont">&#xe6a2;</i>资讯</a>
						</dd>
						<dd>
							<a onclick="WeAdminShow('图片','http://www.baidu.com')"><i class="iconfont">&#xe6a8;</i>图片</a>
						</dd>
						<dd>
							<a onclick="WeAdminShow('用户','https://www.youfa365.com/')"><i class="iconfont">&#xe6b8;</i>用户</a>
						</dd>
					</dl>
				</li>
			</ul>
			<ul class="layui-nav right" lay-filter="">
				<li class="layui-nav-item">
					<a href="javascript:;">Admin</a>
					<dl class="layui-nav-child">
						<!-- 二级菜单 -->
						<dd>
							<a onclick="WeAdminShow('个人信息','http://www.baidu.com')">个人信息</a>
						</dd>
						<dd>
							<a onclick="WeAdminShow('切换帐号','./login.html')">切换帐号</a>
						</dd>
						<dd>
							<a class="loginout" href="login.html">退出</a>
						</dd>
					</dl>
				</li>
				<li class="layui-nav-item to-index">
					<a href="/">前台首页</a>
				</li>
			</ul>

		</div>
		<!-- 顶部结束 -->
		<!-- 中部开始 -->
		<!-- 左侧菜单开始 -->
		<div class="left-nav">
			<div id="side-nav">
				<ul id="nav">

				</ul>
			</div>
		</div>
		<!-- <div class="x-slide_left"></div> -->
		<!-- 左侧菜单结束 -->
		<!-- 右侧主体开始 -->
		<div class="page-content">
			<div class="layui-tab tab" lay-filter="wenav_tab" id="WeTabTip" lay-allowclose="true">
				<ul class="layui-tab-title" id="tabName">
					<li>我的桌面</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<iframe src='./pages/welcome.html' frameborder="0" scrolling="yes" class="weIframe"></iframe>
					</div>
				</div>
			</div>
		</div>
		<div class="page-content-bg"></div>
		<!-- 右侧主体结束 -->
		<!-- 中部结束 -->
		<!-- 底部开始 -->
		<div class="footer">
			<div class="copyright">Copyright ©2018 WeAdmin v1.0 All Rights Reserved</div>
		</div>
		<!-- 底部结束 -->

		<script type="text/javascript">

	/**
	 * (本页面工具方法)
	 * 递归创建菜单地址,
	 * // 菜单基本属性(配置): menuId , menuName , menuType:(U/F , 地址菜单/功能菜单/),menuUrl:菜单地址, subMenus:子菜单数组 , 
	 */
	function recCreateMenuHtmlHaveSbumenue(menuDataAry,cfg){
		var dftcfg = {
				 key_menuId : "menuId"
				,key_menuUrl : "menuUrl"
				,key_menuName : "menuName"
				,key_menuType:"menuType"
				,key_iconCode : "iconCode"
				,key_subMenuArray : "subMenus"
				,menuUrlPre : ""
				,menuType_url : "U"
			}
		if(!cfg){
			cfg = dftcfg ;
		}else{
			// 补充配置信息.
			for(var tmpKey in dftcfg ){
				var val = cfg[tmpKey];
				if( val == null || typeof(val) == undefined ){
					cfg[tmpKey] = dftcfg[tmpKey];
				}
			}
		}

		var rtHtml = '';
		if( !menuDataAry || menuDataAry.length < 1 ){
			return rtHtml ;
		}
		for (var idx in menuDataAry){
			var menuData = menuDataAry[idx];
			var menuId = menuData[cfg.key_menuId];
			var menuUrl = menuData[cfg.key_menuUrl];
			var menuName = menuData[cfg.key_menuName];
			var menuType = menuData[cfg.key_menuType];
			var iconCode = menuData[cfg.key_iconCode];
			var status = menuData[cfg.key_status];
			var srcSubMenuArray = menuData[cfg.key_subMenuArray]; 
			var subMenuArray =[] ; 
			
			var isShow = true ;
			
			if( !(status === undefined) ){ // 有状态值
				if( cfg.val_status_act != status ){
					isShow = false ;
				}
			}
			
			if(!isShow){ // 不显示,则进入下一循环
				continue ;
			}

			if(srcSubMenuArray && srcSubMenuArray.length >0 ){
				for(var tmpIdx in srcSubMenuArray ){
					var subMenuInf = srcSubMenuArray[tmpIdx];
					if(cfg.menuType_url == subMenuInf[cfg.key_menuType] ){
						subMenuArray[subMenuArray.length] = subMenuInf;
					}
				}
			}

			var isHaveSubMenu = (subMenuArray && subMenuArray.length >0 ) ; 
			// 不是URL菜单的,不罗列
			if(menuType != cfg.menuType_url ){
				continue ;
			}
			rtHtml += '<li>';
			if(menuUrl && menuUrl.length > 1 ){
				var linkUrl = menuUrl ; 
				if( menuUrl.indexOf("http") == 0 ){
					
				}else{
					linkUrl = cfg.menuUrlPre + menuUrl ; 
				}
				rtHtml += '<a _href="'+linkUrl+'">'
			}else{
				rtHtml += '<a href="javascript:;">';
			}
			rtHtml += '<i class="iconfont">&#xe6a7;</i>';
			rtHtml += '<cite>' + menuName + '</cite>';
			if(isHaveSubMenu){
				rtHtml += '<i class="iconfont nav_right">&#xe697;</i>';
			}
			rtHtml += '</a>';
			if( isHaveSubMenu ){
				// 子菜单开始
				rtHtml += '<ul class="sub-menu">';
				rtHtml += recCreateMenuHtmlHaveSbumenue(subMenuArray,cfg);
				rtHtml += '</ul>';
				// 子菜单结束
			}
			rtHtml += '</li>';
		}
		return rtHtml ;
	}			


			
//			layui扩展模块的两种加载方式-示例
//		    layui.extend({
//			  admin: '{/}../../static/js/admin' // {/}的意思即代表采用自有路径，即不跟随 base 路径
//			});
//			//使用拓展模块
//			layui.use('admin', function(){
//			  var admin = layui.admin;
//			});
			layui.config({
			  base: './static/js/'
			  ,version: '101100'
			});

	// 获取确认并初始化登录信息
	function doGetAndInitLoginInf(){
		var loginInf  = {} ;		
		
		return loginInf ;
	}


	// 初始化菜单 HTML
	layui.use([],function(){

		// 获取并验证登录信息
		
		var adminLoginInf = doGetAndInitLoginInf() ;

		
		// 渲染登录信息并处理

		// 获取菜单树信息
		var menuDataAry = [];
		// 菜单树配置
		var menuTreeCfg = {
			 key_menuId : "menuId"
			,key_menuUrl : "menuUrl"
			,key_menuName : "menuName"
			,key_menuType:"menuType"
			,key_iconCode : "iconCode"
			,key_subMenuArray : "subMenuArray"
			,menuUrlPre : global_env.urls.tpltRootPath
		};

		if(menuDataAry.length < 1 ){
			// 加载并整理菜单数据 
			var getMenuUrl = global_env.urls.curContextPath + "/html/mgr_opt_data/main_page/role_menuTreeArray.json" ; 
			var getMenuFormData = {};
			$.ajax({
				type:"get",
				url:getMenuUrl,
				data:getMenuFormData,
				dataType:"JSON",
				async:false,
				success:function(rspData){
					menuDataAry = rspData;
					menuTreeCfg.key_subMenuArray = "subMenuArray";
				}
			});
		}

	// DEMO菜单 
	if(menuDataAry.length < 1){
		menuDataAry = [
		  {
		   menuId:1,
		   menuName:"菜单1",
		   menuType:"U",
		   menuUrl:"http://www.baidu.com",
		   subMenuArray:[]
		  },
		  {
		   menuId:2,
		   menuName:"菜单2",
		   menuType:"U",
		   menuUrl:"http://www.baidu.com",
		   subMenuArray:[
		   	 {
			   menuId:21,
			   menuName:"菜单21",
			   menuType:"U",
			   menuUrl:"http://www.baidu.com",
			   subMenuArray:[]
			  },
		   	 {
			   menuId:22,
			   menuName:"菜单22",
			   menuType:"U",
			   menuUrl:"http://www.so.com",
			   subMenuArray:[]
			  }
		   ]
		  }
		  ];
	}
		// 生成菜单HTML 
		var menuHtml = recCreateMenuHtmlHaveSbumenue(menuDataAry,menuTreeCfg);
	
		// 页面赋值
		$("#nav").html(menuHtml);

	});

	
	// 初始化并渲染 admin框架
	layui.use(['jquery','admin'], function(){
		var $ = layui.jquery;
		
	});

		</script>
	</body>
	<!--Tab菜单右键弹出菜单-->
	<ul class="rightMenu" id="rightMenu">
        <li data-type="fresh">刷新</li>
        <li data-type="current">关闭当前</li>
        <li data-type="other">关闭其它</li>
        <li data-type="all">关闭所有</li>
    </ul>

</html>